<template>
  <div>
    <van-nav-bar
      :fixed="true"
      title="折扣券详情"
      class="bg-qrcode"
      left-arrow
      @click-left="$router.push('/discount')"
    ></van-nav-bar>
    <div class="p-20 bg-qrcode m-t-46">
      <div class="b-r-6 bg-white relative m-t-20 b-b-dashed b-darkgrey">
        <van-skeleton avatar :loading="!ready" class="w-100 m-auto">
          <div class="absolute avatar w-60 h-60 o-hidden bg-grey b-round">
            <img class="w-full h-full" :src="detail.picture" />
          </div>
        </van-skeleton>
        <div class="p-t-50 text-center">
          <van-skeleton :row="2" :loading="!ready" class="bg-white p-0 m-v-5">
            <p class="fs-rem-16px text-content p-h-10">{{detail.gname}}</p>
            <p class="fs-rem-12px m-t-10 text-grey flex a-center j-center">
              <van-icon name="clock-o" />
              <span class="m-l-3">过期时间: {{detail.etime}}</span>
            </p>
          </van-skeleton>
        </div>
        <div class="p-10 p-t-0 text-center">
          <div v-if="!detail.ddh" class="flex a-center j-center" style="height: 260px;">
            <van-loading :size="60" color="#1989fa" />
          </div>
          <qrcode v-else :value="detail.ddh" :options="{ width: 200 }"></qrcode>
          <p class="fs-rem-14px m-b-10 text-grey flex a-center j-center">券码: {{detail.ddh}}</p>
        </div>
      </div>
      <div class="b-r-6 bg-white relative desc p-h-10">
        <div class="fs-rem-18px text-title p-10 p-v-15 b-b-dashed b-darkgrey">优惠券详情</div>
        <div class="p-10 text-content fs-rem-13px m-t-1 b-b-dashed b-darkgrey">
          <p class="fs-rem-16px text-title p-v-5">适用门店</p>
          <van-skeleton :row="2" :loading="!ready" class="p-0 m-v-5">
            <p class="p-v-2 fs-rem-14px">{{detail.bname}}</p>
            <p class="p-v-2">{{detail.badress}}</p>
          </van-skeleton>
        </div>
        <div class="p-10 text-content fs-rem-13px m-t-1 b-b-dashed b-darkgrey">
          <p class="fs-rem-16px text-title p-v-5">使用规则</p>
          <p class="p-v-2">1. 自领取后48小时内有效，超时自动过期；</p>
          <p class="p-v-2">2. 每位用户每日限领2张；</p>
          <p class="p-v-2">3. 券使用后才能继续领取；</p>
          <p class="p-v-2">4. 单笔消费仅限使用一张折扣券；</p>
          <p class="p-v-2">5. 已使用的折扣券即时失效，如发生退货交易，折扣券不退回；</p>
        </div>
        <div class="p-10 p-b-30 text-content fs-rem-13px m-t-1">
          <p class="fs-rem-16px text-title p-v-5">温馨提醒</p>
          <p class="p-t-3">此折扣券只限到店支付</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qrcode from '@chenfengyuan/vue-qrcode'
export default {
  data () {
    return {
      ready: false,
      detail: {}
    }
  },
  components: {
    Qrcode
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getCouponDetail()
    },
    async getCouponDetail () {
      let { zxVipXf } = await this.$api.post('/xf/user/query', {
        id: this.$route.params.id
      })
      this.detail = zxVipXf
      this.ready = true
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-qrcode {
  background: linear-gradient(to right, rgb(192, 166, 113), rgb(172, 144, 81));
}
.m-t-46 {
  margin-top: 46px;
}
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
.avatar {
  left: 50%;
  border: 2px solid rgb(237, 216, 153);
  transform: translate(-30px, -50%);
}
.desc {
  &:before, &:after {
    content: "";
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
  }
  &:before {
    left: -8px;
    background: rgb(192, 166, 113);
  }
  &:after {
    right: -8px;
    background: rgb(172, 144, 81);
  }
}
.b-darkgrey {
  border-color: #ececec;
}
</style>
